<template>
	<view class="pop-order-choose-pay">
		<u-popup ref="store_cart_pop" bgColor="#ffffff" :show="show_pop" mode="bottom" :closeOnClickOverlay="true"
			:closeable="true" round="0" @close="handleClose" @open="handleOpen">
			<view class="info-modal-wrap">
				<view class="info-modal-inner">
					<!-- 	<view class="modal-head flex-center">
						<view class="title-box">
							
						</view>
					</view> -->

					<view class="modal-ctx">
						<view class="coupon-wrap">
							<view class="coupon-list">
								<view class="coupon-item" v-for="(item,index) in coupons" :key="index" @click="couponClick(item)">
									<view class="logo-box">
										<image :src="getAssets(`@/static/static-online/coupon/coupon-logo.png`)" mode=""></image>
									</view>
									<view class="title ellipsis-1">
										{{item.jian_price}}元优惠券 ({{item.tiaojian}})
									</view>
									<view class="date-box flex-between">
										<view class="date">
											有效期为：{{ item.startTime }}至{{item.endTime}}
										</view>
									</view>
								</view>
							</view>

							<view class="coupon-rule">
								<view class="rule-title">
									使用条款与条件
								</view>
								<view class="rule-content">
									<scroll-view scroll-y scroll-with-animation class="scroll-container">
										<view class="html-box">
											<u-parse :content="coupon.content" :tagStyle="richStyle"></u-parse>
										</view>
									</scroll-view>
								</view>
							</view>
						</view>
					</view>

					<view class="modal-foot">
						<view class="footer-wrap ">
							<view class="btns flex-between">
								<view class="btn btn-confirm  flex-center" @click="toUse()"
									:class="{is_used: coupon.status == 1, is_expired: coupon.status == 2}">
									
									{{coupon.status == 1 ? '已使用': (coupon.status == 2 ? '已过期': '前往使用')}}
									
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		components: {

		},
		data() {
			return {
				show_pop: false,
				coupons: [],
				coupon: {},

				richStyle: {
					// 字符串的形式
					p: 'color: #000000;font-size: 12px;line-height:1.6;font-family: PingFangSC-Regular;text-align:justify;',
					span: 'color: #000000;font-size: 12px;line-height:1.6;font-family: PingFangSC-Regular;',
					img: 'vertical-align: bottom;'
				}
			}
		},
		computed: {
			...mapState([
				//
			]),

			is_need_zuhe() {
				return false;
			}
		},
		watch: {

		},
		methods: {
			init(item) {
				this.coupon = item;
				this.coupons = [item]
				this.$log('优惠券', item)
				this.show_pop = true;
			},

			doConfirm() {
			
			},

			handleClose() {
				this.show_pop = false;
			},
			handleOpen() {},
			doClose() {
				this.show_pop = false;
			},

			toUse() {
				if (this.coupon.status == 1) {
					// this.$alert('优惠券已使用')
					return
				} else if (this.coupon.status == 2) {
					// this.$alert('优惠券已过期')
					return
				}

				this.show_pop = false;
				this.$emit('confirm', this.coupon)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.pop-order-choose-pay {
		// position: relative;
		// z-index: 1000;
	}


	.info-modal-wrap {
		width: 574rpx;
		width: 660rpx;
		width: 100%;
		position: relative;
		text-align: left;
		padding-bottom: 0;
		// padding-bottom: calc(64rpx + constant(safe-area-inset-bottom));
		// padding-bottom: calc(64rpx + env(safe-area-inset-bottom));

		.info-modal-inner {
			border-radius: 16rpx;
			overflow: hidden;
			width: 100%;
			padding: 0 0;
			padding-bottom: 0;
			min-height: 400rpx;
			background: #FFFFFF;
		}
	}



	.modal-head {
		padding: 20rpx 40rpx;
		border: 1rpx solid #DDDDDD;
		padding-right: 0;

		.title-box {
			flex: 1;
			overflow: hidden;
			padding-right: 30rpx;
			text-align: center;

			image {
				width: 44rpx;
				height: 44rpx;
			}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 30rpx;
				color: #222222;
			}

			.juli {
				margin-top: 4rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}


		.act-box {
			.clear-box {
				margin: 0 0;
				width: 180rpx;
				height: 60rpx;
				background: #F5F5F5;
				border-radius: 45rpx 45rpx 45rpx 45rpx;

				image {
					margin-right: 12rpx;
					width: 28rpx;
					height: 28rpx;
				}

				text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #222222;
				}
			}

			.arrow-box {
				position: relative;
				// right: -30rpx;
				width: 90rpx;
				height: 30rpx;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}


	.modal-ctx {
		width: 100%;
		background-color: #fff;
		padding: 0 0;
		min-height: 200rpx;
		padding-bottom: 30rpx;
		padding-top: 80rpx;
	}


	.scroll-container {
		max-height: 400rpx;
	}


	.coupon-wrap {
		padding: 32rpx;

	}

	.footer-wrap {
		padding: 20rpx;

		.safe-fixed-bottom {
			position: relative;
		}

		.btns {
			.btn {
				flex: 1;
				width: 100%;
				height: 80rpx;

				width: 686rpx;
				height: 80rpx;
				background: #CB0011;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;


				&.btn-cancel {}

				&.btn-confirm {}

				&.is_used {
					background: #EBEEF5;
					color: #999;
				}

				&.is_expired {
					background: #EBEEF5;
					color: #999;
				}


				&+.btn {
					margin-left: 24rpx;
				}
			}
		}
	}


	.coupon-list {
		.coupon-item {
			margin-bottom: 16rpx;
			position: relative;
			background: #FFF;
			border-radius: 10rpx;
			padding: 24rpx;
			box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
			border-radius: 8rpx 8rpx 8rpx 8rpx;

			.logo-box {
				image {
					width: 284rpx;
					height: 46rpx;
				}
			}

			.title {
				margin: 20rpx 0;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}

			.date-box {
				.date {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #000000;
				}

				.btn {
					width: 144rpx;
					height: 48rpx;
					background: #CB0011;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;




				}
			}
		}
	}


	.coupon-rule {
		margin-top: 64rpx;
		border-top: 1rpx solid #EEEEEE;
		padding-top: 64rpx;

		.rule-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
		}

		.rule-content {
			margin-top: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #8B8C9F;
			line-height: 1.6;
		}
	}
</style>